<template>
    <div class="direct">
        <div class="demo-input-suffix" style="margin-left: 5px; margin-right: 15px">
            <el-checkbox v-model="checkbox_isShowDustbinPicture" @change="changeMapType">显示卫星地图</el-checkbox>
        </div>
        <div class="demo-input-suffix" style="margin-right: 15px">
            <el-checkbox v-model="checkbox_isShowDustbinTitle" @change="changeMarkerLabel">显示垃圾桶名称标签</el-checkbox>
        </div>
        <!-- <div class="demo-input-suffix">指导员负责区域：</div>
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
            <el-cascader
                :options="dataVillageList"
                :show-all-levels="false"
                @expand-change="select_village_action"
                @change="select_village_action"
            ></el-cascader>
        </div>-->
        <div class="allmap" id="allmap"></div>
        <div class="tree">
            <el-tree node-key="id" :default-expanded-keys="[1]" :data="data_tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="rightinformation">
            <p for>
                <span id="span1"></span>
            </p>
            <p for>
                <span id="span2"></span>
            </p>
            <hr />
            <p for>
                <span id="span3"></span>
            </p>
            <p for>
                <span id="span4"></span>
            </p>
            <p for>
                <span id="span5"></span>
            </p>

            <p for>
                <span id="span6"></span>
            </p>
            <p for>
                <span id="span7"></span>
            </p>
            <p for>
                <span id="span8"></span>
            </p>
        </div>
        <!--    <el-form
            title="详细信息"
            id="VillageDetail"
            v-model="defaultProps"
            :visible.sync="VillageDetail"
            :key='index'
            class="dialogwhole"
        >
         {{item.sumBuilding}}
        {{item.sumHome}}
        {{item.sumPerson}} 
             <div>总楼数：112</div>
            <div>总户数：250</div>
            <div>实住人数：600</div>
            <hr />
            <div>管理单位：天塔街道</div>
            <div>联系人：王雪</div>
            <div>联系电话：15022033221</div>
        </el-form>-->

        <!-- 右键列表菜单 -->
        <div class="row_box" v-if="MouseEvent.isShow" :style="`left: ${MouseEvent.left}px; top: ${MouseEvent.top}px;`">
            <span @click="goVideo">视频</span>
            <span @click="goPhoto">图片</span>
        </div>
        <el-dialog
            title="视频监控"
            :visible.sync="dialogVisibleHaiKang"
            width="600px"
            :before-close="handleClose"
            :close-on-click-modal="false"
        >
            <!-- <iframe id="iframeBox" :src="dialogVisibleHaiKangSRC" width="100%" height="100%"></iframe> -->
            <haikangVideo style="height: 400px"></haikangVideo>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleHaiKang = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisibleHaiKang = false">确 定</el-button>
            </span> -->
        </el-dialog>
        <el-dialog title="图片展示" v-dialogDrag :visible.sync="dialogVisiblePhoto" width="650px" :close-on-click-modal="false">
            <el-image style="width: 100%; height: 100%" :src="dialogVisiblePhotoSRC"></el-image>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisibleHaiPhoto = false">取 消</el-button> -->
                <el-button type="primary" @click="dialogVisiblePhoto = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 图例 -->
    <div class="person_legend" v-if="showLegend">
      <h3>
        图例
        <i class="iconfont icon-shanchu" @click="showLegend = false"></i>
      </h3>
      <p>
        <span>
          <img :src="legend.markerIcon_FK" alt />
        </span>
        <span style="font-size: 12px">分类房</span>
      </p>
      <p>
        <span>
          <img :src="legend.markerIcon_XK" alt />
        </span>
        <span style="font-size: 12px">分类箱</span>
      </p>
      <p>
        <span>
          <img :src="legend.markerIcon_TK" alt />
        </span>
        <span style="font-size: 12px">普通桶</span>
      </p>
      <p>
        <span>
          <img :src="legend.markerIcon_KHSK" alt />
        </span>
        <span style="font-size: 12px">智能可回收</span>
      </p>
 <p>
        <span>
          <img :src="legend.markerIcon_FM" alt />
        </span>
        <span style="font-size: 12px">分类房溢满</span>
      </p>
      <p>
        <span>
          <img :src="legend.markerIcon_XM" alt />
        </span>
        <span style="font-size: 12px">分类箱溢满</span>
      </p>
      <p>
        <span>
          <img :src="legend.markerIcon_TM" alt />
        </span>
        <span style="font-size: 12px">普通桶溢满</span>
      </p>
      <p>
        <span>
          <img :src="legend.markerIcon_KHSM" alt />
        </span>
        <span style="font-size: 12px">智能可回收溢满</span>
      </p>
    </div>
    </div>
</template>
<script>

import markerIcon_FK from '../../../assets/img/marker/new/分类房.png'
import markerIcon_FM from '../../../assets/img/marker/new/分类房溢满.png'
import markerIcon_TK from '../../../assets/img/marker/new/普通桶.png'
import markerIcon_TM from '../../../assets/img/marker/new/普通桶溢满.png'
import markerIcon_XK from '../../../assets/img/marker/new/分类箱.png'
import markerIcon_XM from '../../../assets/img/marker/new/分类箱溢满.png'
import markerIcon_KHSK from '../../../assets/img/marker/new/智能可回收.png'
import markerIcon_KHSM from '../../../assets/img/marker/new/智能可回收溢满.png'

import haikangVideo from '../VideoSurveillance.vue'
import eventBus from '@/eventBus.js'
// system-master2021\src\components\page\VideoSurveillance.vue
export default {
  components: {
    'haikangVideo': haikangVideo,
  },
  data () {
    return {
      showLegend: true,
      legend: {
        markerIcon_FK: markerIcon_FK,
        markerIcon_FM: markerIcon_FM,
        markerIcon_TK: markerIcon_TK,
        markerIcon_TM: markerIcon_TM,
        markerIcon_XK: markerIcon_XK,
        markerIcon_XM: markerIcon_XM,
        markerIcon_KHSK: markerIcon_KHSK,
        markerIcon_KHSM: markerIcon_KHSM,
        // carXILU: imgCarXILU,
        // carSASHUI: imgCarSASHUI,
        // carGYQINGXI: imgCarGYQINGXI,
        // carCHUXUE: imgCarCHUXUE,
      },
      dialogVisibleHaiKang: false,
      dialogVisibleHaiKangSRC: "",
      dialogVisiblePhoto: false,
      dialogVisiblePhotoSRC: '',
      data_tree: [],
      // dataVillageList: [],
      VillageDetail: false,
      defaultProps: {
        children: 'children',
        longitude: 'longitude',
        latitude: 'latitude',
        label: 'label'
      },
      dataClickRubbishBox: null,
      dataRubbishBoxsCount: [],
      dataRubbishBoxsList: [],
      dataRubbishBoxsDetail: [],
      checkbox_isShowDustbinTitle: '',
      checkbox_isShowDustbinPicture: '',
      map: '',
      map_scopeCircle: '',
      map_markers: [],
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
    }
  },
  mounted () {
    this.loadDate_Tree();
    this.initMap();
    this.loadAllBoxsDetail();
    this.allBoxsCoutForTree();
    // this.loadAllVillage()
  },
  created () {
    var url = window.location.href; //获取url中"?"符后的字串       
    var cs = url.split('?')[1];                //获取?之后的参数字符串
    //alert(url+'地址');//orderCode=20200721093517378188743943022
    var cc = '';
    var cs2 = '';
    if (cs.length > 0) {
    //   cs = cs.replace('orderId=', '');
      var password = cs.split('&')[0];//获取orderid
      var username = cs.split('&')[1];//ocd=20200818103843816416953617735
    //   var cs2 = cs1.replace('ocd=', '');//20200818103843816416953617735

    //   this.submitForm(cs1, cc)
    var url = this.$url + '/GetLoginUserApi?Username=' + username + '&password=' + password
      console.log(url)
      this.$axios({
        url: url,
        method: 'get'
      }).then(res => {
        console.log(res.data)
        if (res.data.IsSucess) {
          localStorage.setItem('clentno', res.data.obj.CLIENT_NO)
          localStorage.setItem('STREET_NO', res.data.obj.STREET_NO)
          localStorage.setItem('USERNAME', res.data.obj.USERNAME)
          localStorage.setItem('ROLEID', res.data.obj.ROLEID)
          localStorage.setItem('USERLEVEL', res.data.obj.USERLEVEL)
        } 
      })
    }
  },
  methods: {
    async allBoxsCoutForTree () {
      var url = this.$url + '/BoxCountInfo?ClientNo=' + localStorage.getItem("clentno")
      const { data } = await this.$axios.get(url)
      this.dataRubbishBoxsCount = data
    },
    // async loadAllVillage () {
    //   var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetGroupsApi?ClientNo='+localStorage.getItem('clentno');
    //   const { data } = await this.$axios.get(url)
    //   this.dataVillageList = data.filter(item => {
    //     return item
    //   })
    // },
    // loadDate_Tree(){
    //   this.$axios({
    //     url: this.$url+ '/GetGroupDataApi?StreetNo=34',
    //     method: 'get'
    //   }).then(res=>{
    //     console.log(res.data)
    //   })
    // },
    async loadDate_Tree () {
      // var url = this.$url + '/GetGroupDataApi?ClientNo=' + localStorage.getItem("clentno") + '&Level=' + localStorage.getItem("USERLEVEL")
      // // var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetGroupDataApi?ClientNo=' + localStorage.getItem("clentno") + '&Level=' + localStorage.getItem("USERLEVEL")
      // console.log(url)
      // const { data } = await this.$axios.get(url)
      // console.log(data)
      // // data[0].id = 2;
      // var dataz = [{id:1, "label": "东丽区", "unit": "新立街道", "contacts": null, "telephone": null, "sumPerson": "69242", "sumBuilding": "174", "sumHome": "20439", "sumArea": "12", "sumDis": "34", "longitude": "117.36027", "latitude": "39.084964", "children": [] }]
      // // this.dataz[0].children.push(data)
      // // console.log(dataz[0].children)
      // if (data.length > 1) {
      //   dataz.forEach((val) => {
      //     val.children = data
      //   })
      // }else {
      //   dataz = data
      // }
      this.data_tree = [
    {
        "label":"东丽区",
        "unit":"东丽区",
        "contacts":null,
        "telephone":null,
        "sumPerson":null,
        "sumBuilding":null,
        "sumHome":null,
        "sumArea":"1",
        "sumDis":"1",
        "longitude":"117.48933856694676",
        "latitude":"39.161518244940126",
        "children":[
            {
                "label":"天津市第一中学滨海学校",
                "unit":"-新立街道",
                "contacts":null,
                "telephone":null,
                "sumPerson":null,
                "sumBuilding":null,
                "sumHome":null,
                "sumDis":"1",
                "longitude":"117.43631676157096",
                "latitude":"39.160551541251195"
             
            },{
                "label":"天津钢管公司中学",
                "unit":"-张贵庄街道",
                "contacts":null,
                "telephone":null,
                "sumPerson":null,
                "sumBuilding":null,
                "sumHome":null,
                "sumDis":"1",
                "longitude":"117.49844291598654",
                "latitude":"39.05410352454666"
             
            },{
                "label":"东丽职教中心学校",
                "unit":"-万新街道",
                "contacts":null,
                "telephone":null,
                "sumPerson":null,
                "sumBuilding":null,
                "sumHome":null,
                "sumDis":"1",
                "longitude":"117.48933856694676",
                "latitude":"39.161518244940126"
             
            }
        ]
    }
]
      // this.data_tree = dataz.filter(item => {
      //   console.log(item)
      //   return item
      // })
    },
    async loadAllBoxsDetail () {
      this.$axios({
        url: this.$url + '/GetBoxInfoDetail',
        method: 'get',
        params: {
          ClientNo: localStorage.getItem("clentno")
        }
      }).then((res) => {
        console.log(res.data)
        this.dataRubbishBoxsDetail = res.data
        this.loadAllBoxs()
      })
    },
    async loadAllBoxs () {
      var url = this.$url + '/GetRubbishPointsApi?ClientNo=' + localStorage.getItem("clentno") + '&Level=' + localStorage.getItem("USERLEVEL")
      // var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetRubbishPointsApi?ClientNo=' + localStorage.getItem("clentno") + '&Level=' + localStorage.getItem("USERLEVEL")
      console.log('loadAllBoxs=' + url)
      const { data } = await this.$axios.get(url)
      this.dataRubbishBoxsList = data
      data.forEach(item => {
        // var icon = markerIcon_rubbish
        if (item.VideoAble == 1 && item) {
        }
        var point = new BMap.Point(item.LONGITUDE, item.LATITUDE);
   
        var marker = new BMap.Marker(point);
        var label = new BMap.Label(item.NAME, { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);

        const _self = this;
        // 右击显示菜单
        // 这一步是为了阻止右击时系统默认的弹出框
        // marker.addEventListener("oncontextmenu", function (e) {
        //   e.preventDefault();
        // });

        // if (item.VideoAble == 1) {
        // 右击事件
        marker.addEventListener("rightclick", function (oEvent) {
          // if (!oEvent) oEvent = window.event;
          // if (oEvent.domEvent.button == 2) {
          // window.event.returnValue = false
          _self.contrastDistance(oEvent.point)
          _self.MouseEvent.left = oEvent.clientX
          _self.MouseEvent.top = oEvent.clientY - 26 * 2
          _self.MouseEvent.isShow = true
          // }
        });
        // }
        marker.disableMassClear()
        var stat = this.addInfoWindow(marker, item);
        var icon = markerIcon_FK
        if (!stat) {
          switch (item.TYPE) {
            case '分类房':
              icon = markerIcon_FK;
              break;
            case '分类箱':
              icon = markerIcon_XK;
              break;
            case '普通桶':
              icon = markerIcon_TK;
              break;
            default:
              icon = markerIcon_KHSK;
              break;
          }
        } else {
          switch (item.TYPE) {
            case '分类房':
              icon = markerIcon_FM;
              break;
            case '分类箱':
              icon = markerIcon_XM;
              break;
            case '普通桶':
              icon = markerIcon_TM;
              break;
            default:
              icon = markerIcon_KHSM;
              break;
          }
        }

        marker.setIcon(new BMap.Icon(icon, new BMap.Size(50, 50)))

        // if (stat && item.VideoAble == 1) {
        //   marker.setIcon(new BMap.Icon(markerIcon_mrubbishVideo, new BMap.Size(40, 40)))
        // } else if (stat) {
        //   marker.setIcon(new BMap.Icon(markerIcon_mrubbish, new BMap.Size(40, 40)))
        // } else if (item.VideoAble == 1) {
        //   marker.setIcon(new BMap.Icon(markerIcon_rubbishVideo, new BMap.Size(40, 40)))
        // } else {
        //   marker.setIcon(new BMap.Icon(markerIcon_rubbish, new BMap.Size(40, 40)))
        // }

        this.map.addOverlay(marker);
      })
      // this.dataRubbishBoxsList = data.filter(item => {
      //   this.addMarker(item)
      //   return item
      // })
    },
    addInfoWindow (marker, item) {
      var data = []
      this.dataRubbishBoxsDetail.forEach(element => {
        if (element.垃圾点编号 == item.ID) {
          data.push(element)
        }
      });
      var status = false

      var height = data.legend * 20
      var sContent = ''
      if (item.PHOTO) {
        sContent += "<img src='" + item.PHOTO + "' width='201' height='134'/>"
        height += 160
      }
      data.forEach(element => {
        if (element.垃圾点编号 == item.ID) {
          // data.push(element)
          sContent += "<p style='margin-top:5px;font-size:14px;'>" + element.垃圾桶类型 + "（" + element.开关状态 + "，" + element.溢满状态 + "）</p>"
            + "<p style='margin-top:5px;font-size:14px;'>重量：" + element.垃圾重量 + "kg，高度：" + element.垃圾高度 + "cm</p>";
          if (element.溢满状态 === '溢满') {
            status = true;
          }
        }
      });
      // data.forEach(item => {
      // {"垃圾点编号":4,"垃圾桶编号":"1","垃圾桶类型":"其他垃圾分类箱","最近投放时间":"2021-12-10 13:36:44","垃圾重量":"16","垃圾高度":"0","开关状态":"关闭","溢满状态":"非溢满"}
      // })
      var infoWindow = new BMap.InfoWindow(sContent, { width: 170, height: height });  // 创建信息窗口对象
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
      });
      return status;
    },
    handleNodeClick (data) {
      console.log(data);
      // var array = [{"区域名称":"东丽区","垃圾房数量":"3","垃圾桶数量":"14","可回收垃圾桶数量":"1","厨余垃圾桶数量":"6","有害垃圾桶数量":"1","其他垃圾桶数量":"6"},{"区域名称":"-新立街道","垃圾房数量":"1","垃圾桶数量":"4","可回收垃圾桶数量":"0","厨余垃圾桶数量":"2","有害垃圾桶数量":"0","其他垃圾桶数量":"2"},{"区域名称":"--丰合社区","垃圾房数量":"1","垃圾桶数量":"4","可回收垃圾桶数量":"0","厨余垃圾桶数量":"2","有害垃圾桶数量":"0","其他垃圾桶数量":"2"},{"区域名称":"---东丽一号小区","垃圾房数量":"1","垃圾桶数量":"4","可回收垃圾桶数量":"0","厨余垃圾桶数量":"2","有害垃圾桶数量":"0","其他垃圾桶数量":"2"},{"区域名称":"-张贵庄街道","垃圾房数量":"2","垃圾桶数量":"10","可回收垃圾桶数量":"1","厨余垃圾桶数量":"4","有害垃圾桶数量":"1","其他垃圾桶数量":"4"},{"区域名称":"--先锋里社区","垃圾房数量":"2","垃圾桶数量":"10","可回收垃圾桶数量":"1","厨余垃圾桶数量":"4","有害垃圾桶数量":"1","其他垃圾桶数量":"4"},{"区域名称":"---俊景苑","垃圾房数量":"2","垃圾桶数量":"10","可回收垃圾桶数量":"1","厨余垃圾桶数量":"4","有害垃圾桶数量":"1","其他垃圾桶数量":"4"}]
      var type = 1;
      if (!data.sumDis) {
        //小区级
        this.setScopeCircle(data, 18)
      } else if (!data.sumArea) {
        //社区级
        this.setScopeCircle(data, 17)
      } else {
        this.setScopeCircle(data, 16)
      }
      this.setScopeCircle(data)
      this.dataRubbishBoxsCount.forEach(element => {
        if (element.区域名称.indexOf(data.unit) >= 0) {
          // 垃圾房数量":"3","垃圾桶数量":"14","可回收垃圾桶数量":"1","厨余垃圾桶数量":"6","有害垃圾桶数量":"1","其他垃圾桶数量":"6"
          document.getElementById('span1').innerText = "垃圾房数量：" + element.垃圾房数量;
          document.getElementById('span2').innerText = "垃圾桶数量：" + element.垃圾桶数量;
          document.getElementById('span3').innerText = "可回收垃圾桶数量：" + element.可回收垃圾桶数量;
          document.getElementById('span4').innerText = "厨余垃圾桶数量：" + element.厨余垃圾桶数量;
          document.getElementById('span5').innerText = "有害垃圾桶数量：" + element.有害垃圾桶数量;
          document.getElementById('span6').innerText = "其他垃圾桶数量：" + element.其他垃圾桶数量;
        }
      });
      // document.getElementById('span1').innerText = "总人数：" + data.sumPerson;
      // document.getElementById('span2').innerText = "总户数：" + data.sumHome;
      // document.getElementById('span3').innerText = "总楼数：" + data.sumBuilding;
      // if (data.sumDis) {
      //   document.getElementById('span4').innerText = "小区数量：" + data.sumDis;
      //   type = 2;
      // } else {
      //   document.getElementById('span4').innerText = "";
      // }
      // if (data.sumArea) {
      //   document.getElementById('span5').innerText = "社区数量：" + data.sumArea;
      //   type = 3;
      // } else {
      //   document.getElementById('span5').innerText = "";
      // }
      // if (data.unit) {
      //   document.getElementById('span6').innerText = "管理单位：" + data.unit;
      // } else {
      //   document.getElementById('span6').innerText = "";
      // }
      // if (data.contacts) {
      //   document.getElementById('span7').innerText = "联系人：" + data.contacts;
      // } else {
      //   document.getElementById('span7').innerText = "";
      // }
      // if (data.telephone) {
      //   document.getElementById('span8').innerText = "联系人电话：" + data.telephone;
      // } else {
      //   document.getElementById('span8').innerText = "";
      // }

    },
    initMap () {
      this.map = new BMap.Map('allmap')
      // var City = '太原'
      // var point = new BMap.Point(112.593887,37.866154) // 创建点坐标
      // var City = '北京'
      // var point = new BMap.Point(116.404, 39.915) // 创建点坐标
      // var City = '福州'
      // var point = new BMap.Point(119.31864, 26.07052) // 创建点坐标
      var City = '天津'
      var point = new BMap.Point(117.48933856694676, 39.161518244940126) // 创建点坐标
      this.map.setCurrentCity(City)
      this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
      let _this = this
      this.map.addEventListener("click", function (type, target, point, pixel, overlay) {
        _this.MouseEvent.isShow = false
      });
      //       this.map.addEventListener("rightclick", function (e) {
      //         var distance = _this.contrastDistance(e.point)
      //         if (distance < 10) {
      // _this.MouseEvent.left = oEvent.clientX
      //             _this.MouseEvent.top = oEvent.clientY - 26 * 2
      //             _this.MouseEvent.isShow = true
      //         }
      //       });
    },
    contrastDistance (pointClick) {
      var disMix = Infinity
      var data = null;
      this.dataRubbishBoxsList.forEach(element => {
        var dis = this.map.getDistance(new BMap.Point(element.LONGITUDE, element.LATITUDE), pointClick)
        if (dis < disMix) {
          disMix = dis;
          data = element;
        }
      });
      this.dataClickRubbishBox = data;
      return disMix;
    },
    changeMapType (val) {
      if (val) {
        this.map.setMapType(BMAP_HYBRID_MAP);
      } else {
        this.map.setMapType(BMAP_NORMAL_MAP);
      }
    },
    changeMarkerLabel (val) {
      for (var i = 0; i < this.map_markers.length; i++) {
        var marker = this.map_markers[i]
        if (val) {
          marker.getLabel().setStyle({ display: 'block' })
        } else {
          marker.getLabel().setStyle({ display: 'none' })
        }
      }
    },
    setScopeCircle (row, zoom) {
      var point = new BMap.Point(row.longitude, row.latitude)
      if (this.map_scopeCircle == '') {
        this.map_scopeCircle = new BMap.Circle(point, 200, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆
        this.map.addOverlay(this.map_scopeCircle);
      } else {
        this.map_scopeCircle.setCenter(point)
      }
      this.map.centerAndZoom(point, zoom)
      // this.map.removeoverlay(this.map_scopeCircle)
    },
    removeCircle (row) {
      if (this.map_scopeCircle != '') {
        this.map.removeOverlay(this.map_scopeCircle)
        this.map_scopeCircle = ''
      }
    },
    // addMarker (data) {
    //   var point = new BMap.Point(data.LONGITUDE, data.LATITUDE);

    //   // this.translateGPS (point)
    //   var myIcon = new BMap.Icon(markerIcon_rubbish, new BMap.Size(32, 35));
    //   //var myIcon = new BMap.Icon(require("../src/assets/img/img.jpg"), new BMap.Size(32,35));
    //   var marker = new BMap.Marker(point, { icon: myIcon });
    //   var label = new BMap.Label(data.ID, { offset: new BMap.Size(20, -10) });
    //   marker.setLabel(label);
    //   this.map_markers.push(marker);
    //   this.addInfoWindow(marker);
    //   this.map.addOverlay(marker);
    // },
    // 跳转至视频页面
    goVideo () {
      if (this.dataClickRubbishBox.VideoAble == 1) {
        this.MouseEvent.isShow = false;
        eventBus.$emit('openPlay');
        // this.$router.push({ path: '/VideoSurveillance', query: {} })
        this.dialogVisibleHaiKang = true;
      } else {
        this.$message.error('当前点位：' + this.dataClickRubbishBox.NAME + '，此点位不支持视频')
      }
      // window.open('https://112.49.125.209:1443/portal/cas/loginPage?service=https://112.49.125.209:1443/portal', '_blank');
    },
    // 跳转至视频页面
    goPhoto (item) {
      this.MouseEvent.isShow = false;
      this.dialogVisiblePhoto = true;
      this.dialogVisiblePhotoSRC = this.dataClickRubbishBox.PHOTO;
    },
    // translateGPS (point) {
    //   var convertor = new BMap.Convertor();
    //   var pointArr = [];
    //   pointArr.push(point);
    //   var _this = this;
    //   convertor.translate(pointArr, 1, 5, function (data) {
    //     if (data.status === 0) {
    //       var marker = new BMap.Marker(data.points[0]);
    //       _this.map.addOverlay(marker);
    //       // this.map.addOverlay(marker);
    //       // bm.addOverlay(marker);
    //       // var label = new BMap.Label("转换后的百度坐标（正确）", { offset: new BMap.Size(20, -10) });
    //       // marker.setLabel(label); //添加百度label
    //       // bm.setCenter(data.points[0]);
    //     }
    //   })
    // },
    // addInfoWindow (marker) {
    //   var sContent = '<iframe src="../../infowindow.html" width=400 height=220 frameborder=0 scrolling=no></iframe>'
    //     // var sContent = "<h4 style='margin:0 0 2px 0;padding:0.2em 0'>体院北育贤里7号楼1门</h4>"
    //     //   + "<div><img id='imgDemo' style='float: left;width:90px;height=100%;' src='https://taojin-his.cdn.bcebos.com/03087bf40ad162d9ac75ef6d1edfa9ec8a13cd2c.jpg' alt='logo'>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>厨余垃圾桶：5.2kg</p>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>可回收圾桶：3.4kg</p>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>其他垃圾桶：已满溢</p>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>有害垃圾桶：1.1kg</p>"
    //     + "<br>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>指导员：张旭</p>";
    //   // + "</div>";
    //   var infoWindow = new BMap.InfoWindow(sContent, { width: 400, height: 400 });  // 创建信息窗口对象
    //   marker.addEventListener("click", function () {
    //     this.openInfoWindow(infoWindow);
    //   });
    // }
    handleClose (done) {
      done();
      eventBus.$emit('endPlay');
    }
  },
}
</script>
<style scoped lang="less">
hr {
    margin-top: 20px;
    margin-bottom: 15px;
}
.allmap {
    width: 100%;
    height: 96%;
    border: 1px solid darkgrey;
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    bottom: 0;
    margin: auto;
}
.direct,
body {
    width: 100%;
    height: 100%;
    position: relative;
}
.tree {
    position: absolute;
    left: 10px;
    top: 40px;
    z-index: 555;
    width: 280px;
    height: 80%;
    opacity: 0.8;
    background: #fff;
}

.tree p {
    color: #60b6a1;
    font-size: 120%;
    margin-left: 10px;
    font-weight: 600;
}
.el-tree {
    color: #000;
    font-weight: 600;
    height: 100%;
    overflow-y: scroll;
    background: #fff;
    box-shadow: -5px -5px 15px -5px rgba(0, 0, 0, 0.3);
}
.rightinformation {
    z-index: 555;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 280px;
    background: #fff;
    /* opacity: 0.6; */
    color: #333;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.3);
}
.rightinformation > p {
    width: 100%;
    margin-bottom: 3px;
}
hr {
    margin: 10px 0;
}
.demo-input-suffix {
    float: left;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.dialogwhole {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 280px;
    height: 200px;
    font-size: 15px;
    opacity: 0.8;
    background: #fff;
    padding: 15px;
}
.row_box {
    width: 120px;
    color: #666;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    position: fixed;
}
.row_box span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
}
.row_box span:hover {
    color: #fff;
    background-color: #409eff;
}
.person_legend {
  width: 300px;
  position: absolute;
  right: 10px;
  top: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    /* // text-align: center; */
    color: #333;
    float: left;
    width: 24%;
    margin-bottom: 5px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 25px;
        }
      }
    }
  }
}
</style>